<script setup>
import { ref, computed } from 'vue'
import { get } from 'lodash-es'
/**
 * @name:父子医嘱展示组件
 * @author:xxx
 * @description:如果有子医嘱，第一行显示父医嘱，下面显示子医嘱；如果没有子医嘱，仅展示父医嘱
 * @param {Object} rowData 传入行数据
 * @return {Object} 医嘱信息依次显示：医嘱名称、剂量+单位、规格、用法、频率
 */

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  },
  paramsKey: {
    type: Object,
    default: () => ({})
  }
})
const hasChild = ref(props.rowData?.children && props.rowData.children?.length > 0)
const dataList = ref(hasChild.value ? [props.rowData, ...props.rowData.children] : [props.rowData])

const generateData = (data) => {
  const { mc, gg, sl, dw, yf, pl, drugPathName } = props.paramsKey
  return {
    mc: get(data, mc),
    gg: get(data, gg),
    sl: get(data, sl) || '1',
    dw: get(data, dw) || '次',
    yf: get(data, yf),
    pl: get(data, pl),
    xmlb: get(data, 'adv.xmlb'),
    drugPathName: get(data, drugPathName)
  }
}

const dataSource = computed(() => dataList.value.map(generateData))
</script>

<template>
  <div v-if="rowData.adv" :class="hasChild ? 'link-border' : ''">
    <div v-for="(item, index) in dataSource" :key="index" class="flex justify-between truncate pl-2">
      <div>
        <span class="pr-2 truncate max-w-[180px]" :title="item.mc">{{ item.mc }}</span>
        <span class="pr-2">{{ item.sl }}{{ item.dw }}</span>
        <span v-if="item.gg && [2, 4, 5].includes(item.xmlb)" class="gray-text">{{ item.gg }}</span>
        <span v-if="item.yf && [2, 4, 5].includes(item.xmlb)" class="gray-text">{{ item.yf }}</span>
        <span v-if="item.pl && ![7].includes(item.xmlb)" class="gray-text">{{ item.pl }}</span>
        <RoundTag v-if="item.drugPathName === '是'" bg-color="#f50">备</RoundTag>
      </div>
      <slot name="suffix"></slot>
    </div>
  </div>
  <div v-else class="pl-2">
    {{ rowData.advName || rowData[paramsKey.mc] }}
  </div>
</template>
<style lang="less" scoped>
.gray-text {
  @apply pr-2 text-gray-400 text-xs;
}
</style>
